<template>
  <view class="content">
    <view class="wrap">
      <u-swiper :list="list"
        @click="bannerClick"
        name="banner_url"
        height="300">
      </u-swiper>
    </view>
    <view
      class="topclock x-row u-skeleton">
      <view
        class="x-col-center fff clockblock">
        <view class="x-row"
          @click="check">
          <image
            class="x-col-center u-skeleton-circle"
            style="width: 64upx; height: 64upx;"
            :src="img+'/mini/indexicon1.png'">
          </image>
          <view
            class="x-col x-col-center">
            <view
              class="clocktitel">
              考勤打卡</view>
            <view
              class="clockdesc">
              记得每日打卡哟</view>
          </view>
        </view>
      </view>
      <view class="x-col">
      </view>
      <view
        class="x-col-center fff clockblock">
        <view class="x-row"
          @click="leave">
          <image
            class="x-col-center"
            style="width: 64upx; height: 64upx;"
            :src="img+'/mini/indexicon2.png'">
          </image>
          <view
            class="x-col x-col-center">
            <view
              class="clocktitel">
              请假申请</view>
            <view
              class="clockdesc">
              报备的好习惯</view>
          </view>
        </view>
      </view>
    </view>

    <view
      v-if="userTypeAry[0].value=='xs'">
      <view
        class=" topclock ">
        <view class="fff"
          style="border-radius: 16rpx;">
          <view
            class="x-row userLine">
            <view
              class="uname x-col-center">
              {{user.nick}}
            </view>
            <view
              class="phone x-col-center">
              （{{user.phone}}）
            </view>
          </view>
          <view
            class="x-row u-skeleton-rect"
            @click="toPage('./targetindex','xs')">
            <view
              class="yeartitel ">
              公司年度目标</view>
            <view
              class="x-col">
            </view>
            <view url=""
              hover-class="none"
              class="x-col-center mnav">
              查看更多<u-icon
                name="arrow-right"
                size="28rpx"
                color="#999">
              </u-icon>
            </view>
          </view>
          <view
            class="x-row u-skeleton-rect">
            <view
              class="leftname ">
              总目标值：{{achie.total}}
            </view>
            <view
              class="x-col">
            </view>
            <view
              class="x-col-center leftname"
              style="padding-right: 32upx;">
              {{achie.percentage}}%
            </view>
          </view>
          <view
            class="progress ">
            <view
              class="frame">
              <text
                :style="{width: (achie.percentage>100?100:achie.percentage)+'%'}"></text>
            </view>
          </view>
          <view
            class="x-row indexnav">
            <view
              class="x-col">
              <view
                @click="toPage('./map','xs')"
                hover-class="none">
                <image
                  :src="img+'/mini/indexs1.png'">
                </image>
                <text>销售路线</text>
              </view>
            </view>
            <view
              class="x-col">
              <view
                @click="toPage('../order/order','xs')"
                url="../order/order">
                <image
                  :src="img+'/mini/indexs2.png'">
                </image>
                <text>我的订单</text>
              </view>
            </view>
            <view
              class="x-col">
              <view
                @click="toPage('../sale/my_product','xs')"
                url="../sale/my_product"
                hover-class="none">
                <image
                  :src="img+'/mini/indexs3.png'">
                </image>
                <text>我的产品</text>
              </view>
            </view>
            <view
              class="x-col">
              <view
                @click="toPage('../sale/my_bill','xs')"
                url="../sale/visit_records"
                hover-class="none">
                <image
                  :src="img+'/mini/indexs4.png'">
                </image>
                <text>拜访记录</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="topclock">
        <view class="fff">
          <view
            @click="toPage('../sale/my_bill','xs')"
            url="../sale/my_bill"
            hover-class="none"
            class="x-row lsitn"
            style="border-radius: 16upx;">
            <image
              :src="img+'/mini/list_icon1.png'">
            </image>
            <text
              class="x-col-center">应收账单</text>
            <view
              class="x-col">
            </view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
          <view
            @click="toPage('./my_customer','xs')"
            url="./my_customer"
            hover-class="none"
            class="x-row lsitn"
            style="border-radius: 16upx;">
            <image
              :src="img+'/mini/list_icon2.png'">
            </image>
            <text
              class="x-col-center">我的客户</text>
            <view
              class="x-col">
            </view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
          <view
            @click="toPage('../sale/report_select','xs')"
            url="../sale/report_select"
            class="x-row lsitn"
            style="border-radius: 16upx;">
            <image
              :src="img+'/mini/list_icon3.png'">
            </image>
            <text
              class="x-col-center">销售报表</text>
            <view
              class="x-col">
            </view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
          <view
            @click="toPage('../sale/expense_list','xs')"
            url="../sale/expense_list"
            class="x-row lsitn"
            style="border-radius: 16upx;">
            <image
              :src="img+'/mini/list_icon4.png'">
            </image>
            <text
              class="x-col-center">报销审批</text>
            <view
              class="x-col">
            </view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
          <view
            @click="toPage('../sale/police_list','xs')"
            url="../sale/police_list"
            class="x-row lsitn"
            style="border-radius: 16upx;">
            <image
              :src="img+'/mini/list_icon5.png'">
            </image>
            <text
              class="x-col-center">销售报警信息</text>
            <view
              class="x-col">
            </view>
            <view
              class="number x-col-center"
              v-if="count>0">
              {{count}}</view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
          <view
            @click="toPage('./taskList','xs')"
            url="taskList"
            class="x-row lsitn"
            style="border-radius: 16upx;">
            <image
              src="/static/renwu.png"
              mode="widthFix">
            </image>
            <text
              class="x-col-center">我的任务</text>
            <view
              class="x-col">
            </view>
            <view
              class="number x-col-center"
              v-if="missioncount>0">
              {{missioncount}}
            </view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
          <view
            @click="toPage('../sale/feedback','xs')"
            url="../sale/feedback"
            class="x-row lsitn"
            style="border-radius: 16upx;">
            <image
              :src="img+'/mini/list_icon6.png'">
            </image>
            <text
              class="x-col-center">售后及投诉</text>
            <view
              class="x-col">
            </view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
          <view
            @click="toPage('./qrcode','xs')"
            url="./qrcode"
            class="x-row lsitn"
            style="border-radius: 16upx;">
            <!--公司收款信息 多图展示  -->
            <image
              :src="img+'/mini/list_icon7.png'">
            </image>
            <text
              class="x-col-center">公司收款信息</text>
            <view
              class="x-col">
            </view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
        </view>
      </view>
    </view>
    <!--  -->
    <block
      v-if="userTypeAry[1].value=='sj'">
      <view class="topclock">
        <view
          class="fff boxobg"
          v-if="user">
          <image
            :src="img+'/mini/bg2x.png'"
            class="imgbg u-skeleton-circle"
            mode="widthFix">
          </image>
          <view
            class="vivwtext">
            <view
              class="vname u-skeleton-fillet">
              {{user.nick}}<text>（{{user.phone}}）</text>
            </view>
            <view
              class="plate u-skeleton-fillet"
              v-if="user.car.car_number">
              车牌号：{{user.car.car_number}}
            </view>
            <view
              class="director u-skeleton-fillet"
              @click="cellPhone(user.role_phone)">
              主管电话：{{user.role_phone}}
            </view>
            <view
              class="destext">
              （温馨提示：如需更改车辆匹
              配人可给主管打电话哟）
            </view>
          </view>
        </view>
        <view
          class="x-row indexnav"
          style="position: relative;z-index: 99;">
          <view class="x-col">
            <view
              @click="toPage('./map','sj')"
              url="./map"
              hover-class="none">
              <image
                :src="img+'/mini/indexs1.png'">
              </image>
              <text>司机路线</text>
            </view>
          </view>
          <view class="x-col">
            <view
              @click="toPage('../order/order','sj')"
              url="../order/order"
              hover-class="none">
              <image
                :src="img+'/mini/indexs2.png'">
              </image>
              <text>我的订单</text>
            </view>
          </view>
          <view class="x-col">
            <view
              @click="toPage('../driver/product_list','sj')"
              url="../driver/product_list">
              <image
                :src="img+'/mini/indexs5.png'">
              </image>
              <text>货物数据</text>
            </view>
          </view>
          <view class="x-col">
            <view
              @click="toPage('../driver/stock_data','sj')"
              url="../driver/stock_data">
              <image
                :src="img+'/mini/indexs6.png'">
              </image>
              <text>库存数据</text>
            </view>
          </view>
        </view>
      </view>
      <view class="topclock">
        <view class="fff">
          <view
            @click="toPage('taskList','sj')"
            url="taskList"
            class="x-row lsitn"
            style="border-radius: 16upx;">
            <image
              src="/static/renwu.png">
            </image>
            <text
              class="x-col-center">我的任务</text>
            <view
              class="x-col">
            </view>
            <view
              class="number x-col-center"
              v-if="missioncount>0">
              {{missioncount}}
            </view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
          <view
            @click="toPage('../sale/police_list','sj')"
            url="../sale/police_list"
            class="x-row lsitn"
            style="border-radius: 16upx;">
            <image
              :src="img+'/mini/list_icon5.png'">
            </image>
            <text
              class="x-col-center">报警信息</text>
            <view
              class="x-col">
            </view>
            <view
              class="number x-col-center"
              v-if="count>0">
              {{count}}</view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
          <view
            @click="toPage('../sale/my_bill','sj')"
            url="../sale/my_bill"
            hover-class="none"
            class="x-row lsitn"
            style="border-radius: 16upx;">
            <image
              :src="img+'/mini/list_icon1.png'">
            </image>
            <text
              class="x-col-center">应收账单</text>
            <view
              class="x-col">
            </view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
          <view
            class="x-row lsitn"
            @click="toPage('../driver/gaveup_order','sj')"
            url="../driver/gaveup_order"
            hover-class="none"
            style="border-radius: 16upx;">
            <image
              :src="img+'/mini/list_icon2.png'">
            </image>
            <text
              class="x-col-center">异常订单</text>
            <view
              class="x-col">
            </view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
          <view
            @click="toPage('../sale/report_select','sj')"
            url="../sale/report_select"
            hover-class="none"
            class="x-row lsitn"
            style="border-radius: 16upx;">
            <image
              :src="img+'/mini/list_icon4.png'">
            </image>
            <text
              class="x-col-center">司机报表</text>
            <view
              class="x-col">
            </view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
          <view
            @click="toPage('../sale/expense_list','sj')"
            url="../sale/expense_list"
            class="x-row lsitn"
            style="border-radius: 16upx;">
            <image
              :src="img+'/mini/list_icon3.png'">
            </image>
            <text
              class="x-col-center">报销审批</text>
            <view
              class="x-col">
            </view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
          <view
            @click="toPage('./qrcode','sj')"
            url="./qrcode"
            class="x-row lsitn"
            style="border-radius: 16upx;">
            <image
              :src="img+'/mini/list_icon7.png'">
            </image>
            <text
              class="x-col-center">公司收款信息</text>
            <view
              class="x-col">
            </view>
            <u-icon
              name="arrow-right"
              size="32rpx"
              color="#333">
            </u-icon>
          </view>
        </view>
      </view>
    </block>
    <!-- v-if="type=='cg' -->
    <block
      v-if="userTypeAry[2].value=='cg'">
      <view class="topclock">
        <view
          @click="toPage('../manage/checkout?type=1','sj')"
          url="../manage/checkout?type=1"
          class="x-row setlist"
          style="border-radius: 16upx;">
          <view class="x-col">
            <view
              class="kg-tiel">
              出库信息</view>
            <view
              class="kg-dexw">
              记录出库货物数据</view>
          </view>
          <image
            :src="img+'mini/kg_icon1.png'"
            class="x-col-center">
          </image>
        </view>
        <view
          @click="toPage('../manage/stock_li?type=2','sj')"
          url="../manage/stock_li?type=2"
          class="x-row setlist"
          style="border-radius: 16upx;">
          <view class="x-col">
            <view
              class="kg-tiel">
              清点入库</view>
            <view
              class="kg-dexw">
              与司机清点核实货物数据入库
            </view>
          </view>
          <image
            :src="img+'mini/kg_icon2.png'"
            class="x-col-center">
          </image>
        </view>
        <view
          @click="toPage('./taskList','sj')"
          url="taskList"
          class="x-row setlist"
          style="border-radius: 16upx;">
          <view class="x-col">
            <view
              class="x-row">
              <view
                class="kg-tiel">
                我的任务</view>
              <view
                class="number x-col-center"
                v-if="missioncount>0">
                {{missioncount}}
              </view>
            </view>

            <view
              class="kg-dexw">
              系统分配的任务数据</view>
          </view>

          <image
            src="/static/renwu.png"
            mode="widthFix"
            class="x-col-center">
          </image>

        </view>

        <view
          @click="toPage('../manage/error_order','sj')"
          url="../manage/error_order"
          class="x-row setlist"
          style="border-radius: 16upx;">
          <view class="x-col">
            <view
              class="kg-tiel">
              异常订单</view>
            <view
              class="kg-dexw">
              报废及特殊订单记录</view>
          </view>
          <image
            :src="img+'mini/kg_icon3.png'"
            class="x-col-center">
          </image>
        </view>
        <view
          @click="toPage('../sale/report_select','sj')"
          url="../sale/report_select"
          hover-class="none"
          class="x-row setlist"
          style="border-radius: 16upx;">
          <view class="x-col">
            <view
              class="kg-tiel">
              库管报表</view>
            <view
              class="kg-dexw">
              提交日报、周报、月报数据
            </view>
          </view>
          <image
            :src="img+'mini/kg_icon4.png'"
            class="x-col-center">
          </image>
        </view>
        <view
          @click="toPage('../sale/expense_list','sj')"
          url="../sale/expense_list"
          class="x-row setlist"
          style="border-radius: 16upx;">
          <!-- <image :src="img+'/mini/list_icon4.png'"></image> -->
          <view class="x-col">
            <view
              class="kg-tiel">
              报销审批</view>
            <view
              class="kg-dexw">
              提交报销申请</view>
          </view>

          <image
            :src="img+'mini/list_icon4.png'"
            class="x-col-center">
          </image>
        </view>
        <view
          @click="toPage('../manage/stock','sj')"
          url="../manage/stock"
          class="x-row setlist"
          style="border-radius: 16upx;">
          <view class="x-col">
            <view
              class="kg-tiel">
              库房库存</view>
            <view
              class="kg-dexw">
              查看库房货物数量</view>
          </view>
          <image
            :src="img+'mini/kg_icon5.png'"
            class="x-col-center">
          </image>
        </view>
      </view>
    </block>
    <u-skeleton
      v-if="type=='xs'||type=='sj'"
      :loading="loading"
      :animation="true"
      bgColor="#FFF">
    </u-skeleton>
    <hoverBall
      v-if="userTypeAry.length>0"
      @onTapType="onTapType">
    </hoverBall>
    <u-select v-model="show"
      @confirm="confirm"
      title="选择登录身份"
      :list="userTypeAry">
    </u-select>
	
	<br> <br>
	  备案号： <a href="http://beian.miit.gov.cn" target="_blank"> 蜀ICP备2021033159号-1</a>
  </view>
</template>

<script>
import easyHover from '../../components/easy-hover.vue'
import hoverBall from '@/components/hover-ball/hover-ball.vue'
export default {
  components: {
    hoverBall
  },
  data() {
    return {
      title: 'Hello',
      img: this.urlimg,
      list: [],
      type: '', //身份判定 xs销售  sj司机 cg库管
      achie: '',
      count: 0, //消息未读总数
      missioncount: 0, //未完成任务总数
      user: '',
      loading: true,
      userTypeAry: [],
      show: false
    }
  },
  onLoad(e) {
    this.type = uni.getStorageSync('userType')
    this.init()
    this.getUserTypeAry()
  },
  onShow() {
    this.getUserInfos()
    this.getUnread()
  },
  onShareAppMessage() {},
  methods: {
    tpClick(tp) {
      uni.setStorageSync('userType', tp)
      console.log('销售板块i单机')
    },
    toPage(url, tp) {
      var that = this
      if (url) {
        if (tp == uni.setStorageSync('userType')) {
          this.$api.navigator(url)
        } else {
          // 如果要操作不同的模块 那么就需要重新登录
          this.$axios('Login/capacity', {
            capacity: tp
          }).then(res => {
            uni.setStorageSync('token', res.result.token)
            uni.setStorageSync('userType', tp)
            that.$axios.navigateTo(url)
          })
        }
      }
    },
    // confirm
    confirm(e) {
      let that = this
      this.$axios('Login/capacity', {
        capacity: e[0].value
      }).then(res => {
        uni.setStorageSync('token', res.result.token)
        uni.setStorageSync('userType', e[0].value)
        that.type = e[0].value
        that.init()
      })
    },
    onTapType() {
      this.show = !this.show
    },
    getUserTypeAry() {
      let that = this
      that.userTypeAry = uni.getStorageSync('userTypeAry')
    },
    testClick() {
      this.$api.navigator('text')
    },
    bannerClick(idx) {
      // banner图点击事件
      //
      if (this.list[idx].is_html) {
        getApp().globalData.bannerInfo = this.list[idx]
        this.$api.navigator('content')
      }
    },
    cellPhone(p) {
      uni.makePhoneCall({
        phoneNumber: p
      })
    },
    // user/userinfo 			员工个人信息
    getUserInfos() {
      let that = this
      this.$axios('user/userinfo', {}).then(res => {
        that.user = res.result
        that.loading = false
        uni.setStorageSync('userInfo', res.result)
      })
    },
    inits() {
      this.init()
    },
    // index/achievement 			首页公司年度目标
    achievement() {
      let that = this
      this.$axios('index/achievement', {}).then(res => {
        that.achie = res.result
        that.loading = false
      })
    },
    //跳转考勤打卡
    check() {
      uni.navigateTo({
        url: './punchtheclock'
      })
    },
    leave() {
      uni.navigateTo({
        url: './leave'
      })
    },
    init() {
      this.getBanner()
      if (this.type == 'xs' || this.type == 'sj') this.achievement()
    },
    // message/unread 			获取消息未读总数
    getUnread() {
      let that = this
      this.$axios('message/unread', {}).then(res => {
        that.count = res.result.count
        that.missioncount = res.result.missioncount
      })
    },
    getBanner() {
      // index/banner
      let that = this
      this.$axios('index/banner', {}).then(res => {
        that.list = res.result
      })
    }
  }
}
</script>

<style>
page {
  background: #f8f9fc;
}
.userLine {
  padding: 32rpx 0 16rpx 32rpx;
  box-sizing: border-box;
}
.userLine .phone {
  font-size: 28rpx;
  font-weight: 400;
  color: #666666;
  line-height: 40rpx;
}
.userLine .uname {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  line-height: 44rpx;
}
.topclock {
  padding: 32upx;
  padding-top: 0;
}

.clockblock {
  border-radius: 16upx;
  box-shadow: 0px 2px 8px 0px rgba(237, 241, 253, 1);
  width: 320upx;
  padding: 36upx 0 46upx 32upx;
}

.clockblock image {
  margin-right: 20upx;
  display: block;
}

.clocktitel {
  color: #333;
  font-size: 36upx;
}

.clockdesc {
  color: #999;
  font-size: 24upx;
  padding-top: 5upx;
}

.wrap {
  padding: 32upx;
}

.yeartitel {
  color: #333;
  padding: 32upx;
  font-size: 36upx;
}

.mnav {
  color: #999;
  font-size: 28upx;
  padding-right: 32upx;
}

.leftname {
  color: #2b88fe;
  font-size: 28upx;
  padding-left: 32upx;
}

.progress {
  position: relative;
  padding: 0 32upx;
  padding-top: 20upx;
  padding-bottom: 60upx;
}

.frame {
  position: relative;
  height: 20upx;
  border-radius: 20upx;
  background: #f2f2f2;
}

.frame text {
  position: absolute;
  left: 0;
  top: 0;
  background: #2b88fe;
  height: 20upx;
  border-radius: 20upx;
}

.frame text::after {
  width: 20upx;
  height: 20upx;
  background: #fff;
  border-radius: 100%;
  position: absolute;
  right: 0;
  top: 0;
  content: '';
}

.frame text::before {
  width: 34upx;
  height: 34upx;
  background: #2b88fe;
  border-radius: 100%;
  position: absolute;
  right: -8upx;
  top: -6upx;
  content: '';
}

.indexnav {
  border-top: 1px solid #f5f5f5;
  padding: 40upx 0;
}

.indexnav .x-col image {
  width: 96upx;
  height: 96upx;
  display: block;
  margin: auto;
}

.indexnav .x-col text {
  display: block;
  text-align: center;
  color: #333;
  font-size: 28upx;
}

.lsitn {
  padding: 20upx 0;
  padding: 0 32upx;
  border-bottom: 1px solid #f2f2f2;
}

.lsitn image {
  width: 48upx;
  height: 48upx;
  display: block;
  margin: 32upx 0;
  margin-right: 15upx;
}

.lsitn text {
  color: #333;
  font-size: 32upx;
}

.number {
  background: #ff3b30;
  height: 40upx;
  width: 40upx;
  border-radius: 100%;
  line-height: 40upx;
  text-align: center;
  color: #fff;
  font-size: 24upx;
}

.boxobg {
  position: relative;
}

.imgbg {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

.vivwtext {
  position: relative;
  padding: 32upx;
  z-index: 9;
}

.vname {
  color: #333;
  font-size: 36upx;
  font-weight: 900;
}

.vname text {
  color: #666;
  font-size: 26upx;
  padding-left: 10upx;
  font-weight: 500;
}

.plate {
  color: #2b88fe;
  font-size: 28upx;
  border-radius: 30upx;
  border: 1px solid #2b88fe;
  display: inline-block;
  padding: 0 20upx;
  margin: 20upx 0;
}

.director {
  color: #333;
  font-size: 28upx;
}

.destext {
  color: #999;
  font-size: 28upx;
  padding-top: 20upx;
}

.setlist {
  background: #fff;
  border-radius: 16upx;
  padding: 32upx;
  margin-bottom: 20upx;
}

.setlist image {
  width: 64upx;
  height: 64upx;
  display: block;
}

.kg-tiel {
  color: #333;
  font-size: 36upx;
}

.kg-dexw {
  color: #999;
  font-size: 24upx;
}
</style>
